<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.bg{
				background-color: azure;
			}
		</style>
		<script src="//cdn.bootcss.com/jquery/1.6.4/jquery.min.js"></script>
		
		<script type="text/javascript">		
			function doMain(){
				doCheck2();
			}
			function doCheck2(){
				//后代选择器
				//$("#from1 input").css("background-color","aqua");
				//子选择器
				//$("#from1 > input").css("background-color","aquamarine");
				//紧邻选择器
				//$("#tr1 + tr").css("background-color","aquamarine");
				//其后兄弟选择器
				//$("#tr1 ~ tr").css("background-color","aquamarine");
				$("#tr1 ~ tr input").css("background-color","aquamarine");
			}
			function doCheck(){
				/*
					 jquery常用的选择器
					 一、基本选择器
					 1、id选择器
					 jQuery("#标签id")
					  等价于 document.getElementById()
					 注意：jquery的选择结果是jquery对象
					    dom对象转换为 jquery对象
					    jQuery(dom对象)
					    
					    jquery对象转换为dom对象
					    jQuery(选择器)[序号]或者
					    jQuery(选择器).get(0)
					 2、标签选择器
					   $("标签名")
					   选择的结果是所有的改名的标签对象数组集合
					 3、样式类选择器
					 $(".样式类名")
					 4、*选择器
					 $("*")
					 5、列举选取器（集合选择器） --- 所有满足条件的并集
					 $("选择器1，选择器2，。。。选择器n")
					 
					 二、层次选择器
					 1、后代选择器
					 $('父元素' 后代元素的名称)  
					 后代选择器包括所有的子元素
					 2、子选择器
					 $('父元素' > 后代元素的名称)
					 子选择器只包括第一层的子元素
					 3、紧邻选择器
					 $('元素1' + 紧邻元素的名称)
					 选取紧邻元素1的下一个元素
					 4、兄弟选择器
					 $('元素1' ~ 元素的名称)
					 选择所有的位于元素1后面的同级的元素
					 * */
					//id选择器  等价于 document.getElementById()
					console.info("id选择器")
					$("#txtName")[0].value = 'xiaoli';
					
					//操作css样式
					$("td,#txtName").css("background-color","red");
					
					console.info($("#txtName")[0].value);
					
					console.info("标签选择器")
					var options = $("option");
					for(var i=0;i<options.length;i++){
						console.info(options[i].innerHTML);
					}
					
					console.info("使用了样式类.gb的控件：")
					console.info($(".bg").get(1).innerHTML);
					
//					$("h1,#one").css("backgroundColor","#bbffaa");
//					$("h1").css("backgroundColor","#bbffaa");
//					$("#one").css("backgroundColor","#bbffaa");

			}
		</script>
		
		
	</head>
	<body>
		<div align="center">
		<form id="from1" action="#" method="get">	
			<input name="ttt" id="ttt" />
			<table border="1" cellpadding="0" cellspacing="0" 
				bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
			<tbody>
			<tr id="tr1">
				<td class="bg">姓名</td><td><input type="text" id="txtName" name="txtName" onblur="checkName();"/><div><span id="sptxtName"></span></div></td>
			</tr>
			<tr >
				<td class="bg">登录密码</td>
				<td><input type="password" id="txtPsw" name="txtPsw" onblur="checkPsw(this);"/><div><span id="sptxtPsw"></span></div></td>
			</tr>
			<tr>
				<td>性别</td>
				<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
				<td><input type="radio" id="radSex" name="radSex" onclick="checkSex();" /> 女
				    <input type="radio" id="radSex2" name="radSex"  onclick="checkSex();"/>男	
				    <div><span id="sptxtSex"></span></div>
			</tr>
			
			<tr>
				<td>个人简历</td>
				<td><input type="file" id="fileResume" name="fileResume"/></td>
			</tr>
			<tr>
				<td>兴趣爱好</td>
				<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
				<td><input type="checkbox" id="chHobby1" name="chHobby" onclick="checkHobby();"/>游泳
					<input type="checkbox" id="chHobby2" name="chHobby" onclick="checkHobby();"/>爬山
				<input type="checkbox" id="chHobby3" name="chHobby" onclick="checkHobby();"/>dota
				<input type="checkbox" id="chHobby4" name="chHobby" onclick="checkHobby();"/>coding
				<input type="checkbox" id="chHobby5" name="chHobby" onclick="checkHobby();"/>testing
				<div><span id="sptxtHobby"></span></div>
				</td>
				
			</tr>
			<tr>
				<td>隐藏控件</td>
				<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
			</tr>
			<tr>
				<td>学历</td>
				<td><select id="selectXL" name="selectXL" style="width: 120px;"  onclick="checkGrade();">
					<option value=""></option>
					<option value="DZ">大专</option>
					<option value="BK">本科</option>					
					<option value="SS">硕士</option>
					<option value="BS">博士</option>
				</select>
				<div><span id="spselectXL"></span></div>
				</td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input style="" name="txtMail" id="txtMail" /></td>
			</tr>
			<tr>
				<td><input type="button" value="提交" id="btnSubmit" onclick="return doMain();"/>
				<input type="submit" value="提交2" id="btnSubmit" onclick="return checkMe();"/></td>
				<td><input type="reset" value="重置" id="btnSubmit"/></td>
			</tr>
		</tbody>
		</table>
			
			
			
		</form>
		</div>
	</body>
</html>
